<template>
	<view class="page index">
		<view class="main">
			<view class="layout scheme">
				<view class="header">
					<view class="left">
						<view class="topic">
							变更前实施方案
						</view>
					</view>
				</view>
				<view class="container">
					<view class="scheme-content">
						<view class="scheme-item">
							开始日期：{{detail.startDate[0]}}-{{detail.startDate[1]}}-{{detail.startDate[2]}}
						</view>
						<view class="scheme-item">
							终止日期：{{detail.endDate[0]}}-{{detail.endDate[1]}}-{{detail.endDate[2]}}
						</view>
						<view class="scheme-item">
							实施内容：{{detail.content}}
						</view>
						<view class="scheme-item max">
							实施要求：{{detail.requirement}}
						</view>
						<view class="scheme-item max">
							实施文档：
						</view>
						<view class="scheme-item max file" v-for="(item, index) in detail.fileUrls" :key="index" @click="openFile(item)">
							{{index + 1}}.{{item.split('.').pop()}}
						</view>
					</view>
				</view>
			</view>
			<view class="form">
				<picker mode="date" @change="selectStartTime">
					<view class="picker">
						<common-input
						  title="变更后实施开始日期" 
							placeholder="请填写实施开始日期" 
							v-model="startTime"
							:border-bottom="false"
							:require="false"
						>
						</common-input>
					</view>
				</picker>
				<picker mode="date" @change="selectEndTime">
					<view class="picker">
						<common-input
						  title="变更后实施终止日期" 
							placeholder="请填写实施终止日期" 
							v-model="endTime"
							:require="false"
						>
						</common-input>
					</view>
				</picker>
				<view class="text">
					<view class="title">
						<view>
							变更后实施内容说明
						</view>
						<!-- <view class="require"></view> -->
					</view>
					<textarea v-model="content" placeholder="请输入" placeholder-class="place"></textarea>
				</view>
				<view class="text">
					<view class="title">
						<view>
							变更后实施要求说明
						</view>
						<!-- <view class="require"></view> -->
					</view>
					<textarea v-model="require" placeholder="请输入" placeholder-class="place"></textarea>
				</view>
				<update-file :explain="true" title="变更后实施文档" @update="updatefiles"></update-file>
			</view>
		</view>
		<view class="footer">
			<button @click="save">提交审批</button>
		</view>
	</view>
</template>

<script>
	import commonInput from "@/components/commonInput.vue";
	import updateFile from "@/components/updateFile.vue";
	import {createImplementApi} from "@/api/project_api.js";
	export default{
		data() {
			return{
				detail: {},
				start: '',
				end: '',
				expect: '',
				startTime: '',
				endTime:'',
				content:'',
				require:'',
				fileUrls: [],
			}
		},
		onLoad(e) {
			this.detail = JSON.parse(e.detail);
			this.start = this.getLocalTime(this.detail.startDate);
			this.end = this.getLocalTime(this.detail.endDate);
			this.expect = this.detail.expectedSignTime ? this.getLocalTime(this.detail.expectedSignTime) : '';
		},
		components: {
			commonInput,
			updateFile
		},
		methods:{
			getLocalTime(date){
				let time = `${date[0]}-${date[1].toString().padStart(2, '0')}-${date[2].toString().padStart(2, '0')}`;
				return time;
			},
			updatefiles(e){
				this.fileUrls = e.map((item) => item.path)
			},
			// 开始时间
			selectStartTime(e){
				this.startTime = e.detail.value
			},
			// 结束时间
			selectEndTime(e){
				this.endTime = e.detail.value
			},
			// 预览文件
			openFile(file){
				if(this.$share.isImg(file)){
					let urls = [];
					urls[0] = file
					uni.previewImage({
						urls: urls
					})
				}else{
					this.$share.openFile(file);
				}
			},
			save(){
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				createImplementApi({
					// id:this.detail.id,
					projectId: this.detail.projectId,
					expectedSignAmount: this.detail.expectedSignAmount || 0,
					expectedSignTime: this.expect,
					notSignExplain: this.detail.notSignExplain || '',
					notSignFileUrls: this.detail.notSignFileUrls || [],
					startDate: this.startTime == '' ? this.start : this.startTime,
					endDate: this.endTime == '' ? this.end : this.endTime,
					content: this.content == '' ? this.detail.content : this.content,
					requirement: this.require == '' ? this.detail.requirement : this.require,
					fileUrls: this.fileUrls.length == 0 ? this.detail.fileUrls : this.fileUrls
				}).then(() => {
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '申请成功！'
					})
					setTimeout(() => {
						uni.navigateBack();
					},1500)
				}).catch(() => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		@include flex-c;
		.main{
			flex: 1 0 0;
			overflow: auto;
			.scheme{
				@include box;
				margin: 28rpx;
				.header{
					padding: 18rpx 28rpx;
					@include flex-r-between-center;
					border-bottom: 4rpx #f7f7f7 solid;
					.left{
						@include flex-r-start-center;
						.icon{
							color: #101010;
							font-size: 38rpx;
							font-weight: bold;
						}
						.topic{
							padding-left: 8rpx;
							color: #000;
							font-size: 28rpx;
						}
					}
					.right{
						color: #4095E5;
						font-size: 24rpx;
					}
				}
				.container{
					padding: 0 28rpx;
					.scheme-content{
						padding: 18rpx 0 10rpx;
						@include flex-r-wrap;
						.scheme-item{
							width: 50%;
							color: #9A9A9A;
							font-size: 24rpx;
							padding: 0 0 18rpx;
						}
						.max{
							width: 100%;
						}
						.file{
							@include flex-r-center-center;
							height: 52rpx;
							border-radius: 6rpx;
							color: #101010;
							font-size: 26rpx;
							background-color: #F3F6F9;
							padding: 0;
							margin-bottom: 18rpx;
						}
					}
				}
			}
			.form{
				.text{
					border-bottom: 4rpx #e5e5e5 solid;
					padding: 12rpx 30rpx;
					.title{
						font-size: 28rpx;
						color: #101010;
						padding: 0 0 16rpx;
						display: flex;
						align-items: center;
						.require{
						  height: 28rpx;
						  width: 6rpx;
						  background-color: #c24135;
						  margin-left: 10rpx;
					  }
					}
					textarea{
						font-size: 28rpx;
						color: #909090;
						height: 125rpx;
					}
					.place{
						font-size: 28rpx;
						color: #909090;
					}
				}
			}
			&::-webkit-scrollbar{
				display: none;
			}
		}
		.footer{
			flex: 0 0 auto;
			padding: 24rpx 130rpx;
			button{
				@include button;
				background-color: #198AFA;
				color: #fff;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				width: 100%;
			}
		}
	}
</style>